---
name: ImageViewer
route: /component/imageViewer
menu: Components
---

import { Playground, Props } from 'docz';
import { ImageViewer } from '../packages/mall-image-viewer/src/index.tsx';
import '../packages/mall-image-viewer/src/styles/index.scss';

# ImageViewer

## 介绍
<br />
商城商品详情页图片预览组件


## 安装

```
yarn add @keekuun/mall-image-viewer
```

## 引用

```typescript
import { ImageViewer } from '@keekuun/mall-image-viewer';
import '@keekuun/mall-image-viewer/src/styles/index.scss';
```

## 基本使用
<Playground>
    {() => {
        const data = [
                {
                  original: 'https://cass-upload.oss-cn-shenzhen.aliyuncs.com/test/merchant/2020-06-18/%E6%9B%BC%E7%89%8CHU-816-Z-KIT_1eb33oslc_1gm.jpg',
                  thumbnail: 'https://cass-upload.oss-cn-shenzhen.aliyuncs.com/test/merchant/2020-06-18/%E6%9B%BC%E7%89%8CHU-816-Z-KIT_1eb33oslc_1gm.jpg',
                },
                {
                  original: 'https://pic-market.cassmall.com/store/test/store/1600180233899_QdAj5yeZPTcZXD4n3E3TwnMDe4trsdsM.JPG',
                  thumbnail: 'https://pic-market.cassmall.com/store/test/store/1600180233899_QdAj5yeZPTcZXD4n3E3TwnMDe4trsdsM.JPG',
                },
                {
                  original: 'https://pic-market.cassmall.com/store/prod/store/1573723807672_n5zKHCribXtHxwnXmEbnDNEiNyr5G4Ke.png',
                  thumbnail: 'https://pic-market.cassmall.com/store/prod/store/1573723807672_n5zKHCribXtHxwnXmEbnDNEiNyr5G4Ke.png',
                },
                {
                  original: 'https://pic-market.cassmall.com/store/prod/store/1569744449326_GSeQdXMdTZJ2MhfRB24k5r6XJiRSztTr.jpg',
                  thumbnail: 'https://pic-market.cassmall.com/store/prod/store/1569744449326_GSeQdXMdTZJ2MhfRB24k5r6XJiRSztTr.jpg',
                },
                {
                  original: 'https://pic-market.cassmall.com/mall/demo/2020-5/1589274073153_MZCcM2hDfhFRZ8XYDFtpDn4rtxnMNam2.jpg',
                  thumbnail: 'https://pic-market.cassmall.com/mall/demo/2020-5/1589274073153_MZCcM2hDfhFRZ8XYDFtpDn4rtxnMNam2.jpg',
                },
                {
                  original: 'https://pic-market.cassmall.com/mall/demo/2020-5/1589274076148_R8bbjjmpYkcXp2thCE8wXRYJTKfD4iNF.jpg',
                  thumbnail: 'https://pic-market.cassmall.com/mall/demo/2020-5/1589274076148_R8bbjjmpYkcXp2thCE8wXRYJTKfD4iNF.jpg',
                },
                {
                  original:
                    'https://pic-market.cassmall.com/store/prod/store/1569726869595_7KPNAWGxbfFAMhGf3WGzrnmk3NSRf8yc.jpg?version=1604371489528',
                  thumbnail:
                    'https://pic-market.cassmall.com/store/prod/store/1569726869595_7KPNAWGxbfFAMhGf3WGzrnmk3NSRf8yc.jpg?version=1604371489528',
                },
            ];
            return  <ImageViewer data={data} />
        }
    }
</Playground>

<br />

## 自动播放
<Playground>
    <ImageViewer
        data={[
                 {
                   original: 'https://cass-upload.oss-cn-shenzhen.aliyuncs.com/test/merchant/2020-06-18/%E6%9B%BC%E7%89%8CHU-816-Z-KIT_1eb33oslc_1gm.jpg',
                   thumbnail: 'https://cass-upload.oss-cn-shenzhen.aliyuncs.com/test/merchant/2020-06-18/%E6%9B%BC%E7%89%8CHU-816-Z-KIT_1eb33oslc_1gm.jpg',
                 },
                 {
                   original: 'https://pic-market.cassmall.com/store/test/store/1600180233899_QdAj5yeZPTcZXD4n3E3TwnMDe4trsdsM.JPG',
                   thumbnail: 'https://pic-market.cassmall.com/store/test/store/1600180233899_QdAj5yeZPTcZXD4n3E3TwnMDe4trsdsM.JPG',
                 },
                 {
                   original: 'https://pic-market.cassmall.com/store/prod/store/1573723807672_n5zKHCribXtHxwnXmEbnDNEiNyr5G4Ke.png',
                   thumbnail: 'https://pic-market.cassmall.com/store/prod/store/1573723807672_n5zKHCribXtHxwnXmEbnDNEiNyr5G4Ke.png',
                 },
                 {
                   original: 'https://pic-market.cassmall.com/store/prod/store/1569744449326_GSeQdXMdTZJ2MhfRB24k5r6XJiRSztTr.jpg',
                   thumbnail: 'https://pic-market.cassmall.com/store/prod/store/1569744449326_GSeQdXMdTZJ2MhfRB24k5r6XJiRSztTr.jpg',
                 },
                 {
                   original: 'https://pic-market.cassmall.com/mall/demo/2020-5/1589274073153_MZCcM2hDfhFRZ8XYDFtpDn4rtxnMNam2.jpg',
                   thumbnail: 'https://pic-market.cassmall.com/mall/demo/2020-5/1589274073153_MZCcM2hDfhFRZ8XYDFtpDn4rtxnMNam2.jpg',
                 },
                 {
                   original: 'https://pic-market.cassmall.com/mall/demo/2020-5/1589274076148_R8bbjjmpYkcXp2thCE8wXRYJTKfD4iNF.jpg',
                   thumbnail: 'https://pic-market.cassmall.com/mall/demo/2020-5/1589274076148_R8bbjjmpYkcXp2thCE8wXRYJTKfD4iNF.jpg',
                 },
                 {
                   original:
                     'https://pic-market.cassmall.com/store/prod/store/1569726869595_7KPNAWGxbfFAMhGf3WGzrnmk3NSRf8yc.jpg?version=1604371489528',
                   thumbnail:
                     'https://pic-market.cassmall.com/store/prod/store/1569726869595_7KPNAWGxbfFAMhGf3WGzrnmk3NSRf8yc.jpg?version=1604371489528',
                 },
               ]}
        autoPlay
        showPlayButton
    />
</Playground>

<br />

## 幻灯片

<Playground>
    <ImageViewer
        data={[
                 {
                   original: 'https://cass-upload.oss-cn-shenzhen.aliyuncs.com/test/merchant/2020-06-18/%E6%9B%BC%E7%89%8CHU-816-Z-KIT_1eb33oslc_1gm.jpg',
                   thumbnail: 'https://cass-upload.oss-cn-shenzhen.aliyuncs.com/test/merchant/2020-06-18/%E6%9B%BC%E7%89%8CHU-816-Z-KIT_1eb33oslc_1gm.jpg',
                 },
                 {
                   original: 'https://pic-market.cassmall.com/store/test/store/1600180233899_QdAj5yeZPTcZXD4n3E3TwnMDe4trsdsM.JPG',
                   thumbnail: 'https://pic-market.cassmall.com/store/test/store/1600180233899_QdAj5yeZPTcZXD4n3E3TwnMDe4trsdsM.JPG',
                 },
                 {
                   original: 'https://pic-market.cassmall.com/store/prod/store/1573723807672_n5zKHCribXtHxwnXmEbnDNEiNyr5G4Ke.png',
                   thumbnail: 'https://pic-market.cassmall.com/store/prod/store/1573723807672_n5zKHCribXtHxwnXmEbnDNEiNyr5G4Ke.png',
                 },
                 {
                   original: 'https://pic-market.cassmall.com/store/prod/store/1569744449326_GSeQdXMdTZJ2MhfRB24k5r6XJiRSztTr.jpg',
                   thumbnail: 'https://pic-market.cassmall.com/store/prod/store/1569744449326_GSeQdXMdTZJ2MhfRB24k5r6XJiRSztTr.jpg',
                 },
                 {
                   original: 'https://pic-market.cassmall.com/mall/demo/2020-5/1589274073153_MZCcM2hDfhFRZ8XYDFtpDn4rtxnMNam2.jpg',
                   thumbnail: 'https://pic-market.cassmall.com/mall/demo/2020-5/1589274073153_MZCcM2hDfhFRZ8XYDFtpDn4rtxnMNam2.jpg',
                 },
                 {
                   original: 'https://pic-market.cassmall.com/mall/demo/2020-5/1589274076148_R8bbjjmpYkcXp2thCE8wXRYJTKfD4iNF.jpg',
                   thumbnail: 'https://pic-market.cassmall.com/mall/demo/2020-5/1589274076148_R8bbjjmpYkcXp2thCE8wXRYJTKfD4iNF.jpg',
                 },
                 {
                   original:
                     'https://pic-market.cassmall.com/store/prod/store/1569726869595_7KPNAWGxbfFAMhGf3WGzrnmk3NSRf8yc.jpg?version=1604371489528',
                   thumbnail:
                     'https://pic-market.cassmall.com/store/prod/store/1569726869595_7KPNAWGxbfFAMhGf3WGzrnmk3NSRf8yc.jpg?version=1604371489528',
                 },
               ]}
        autoPlay
        showPlayButton
        showNav
        showZoom={false}
        trigger={'click'}
        thumbnailPosition={'right'}
    />
</Playground>

<br />

## 关键属性

| 属性 | 类型 | 默认值| 描述 |
| ---- | ----| ---- | ---- |
| className | string | '' | 类名 |
| style |  React.CSSProperties  | undefined | 样式 |
| autoPlay | boolean | false |是否自动播放 |
| data | ReactImageGalleryItem[] | [] |图片数据 |
| showNav | boolean | false |是否显示切换按钮箭头 |
| trigger | 'hover' | 'click' | 'hover' | hover切换, click切换 |
| showZoom | boolean | true | 是否显示放大对比 |


## 完整参数
> 参考[REACT IMAGE GALLERY](https://www.linxtion.com/demo/react-image-gallery/)

<Props of={ImageViewer} />


## 兼容性完善

在IE9下，es6 classList相关API会报错，请在项目中安装如下依赖，并引入：

```
npm install classlist-polyfill -S

# 或者
yarn add classlist-polyfill -S
```

然后在项目中引入
```js
import './fundebug';
import './public-path';
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';
import 'classlist-polyfill';
import './app';
```
